<template>
  <div class="spotlight pages">
    <Top></Top>
        <Nav></Nav>
<!--    <div class="content-nav">-->
<!--      <div class="center-content" v-loading="tabLoading">-->
<!--        <div class="nav">-->
<!--          <div class="tab-item">-->
<!--            <router-link to="/" exact>-->
<!--              首页1-->
<!--            </router-link>-->
<!--          </div>-->
<!--          <router-link :to=" {path:'/imageList',query:{id:tabActive}}" class="tab-item" v-for="(item,index) in tabList" :key="item.id">-->
<!--            <div  class="tab-item" >{{ item.name }}</div>-->
<!--          </router-link>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="info-list">
      <div class="tab">
        <div  class="select-item" v-for="(item,index) in menuList" :key="item.id">
          <div :class="menuActive===item.id?'active':''" @click="changeActive(item)" class="tab-item">{{ item.name }}</div>
        </div>
      </div>
      <div class="content-list" v-loading="positionLoading">
        <div class="bottom">
          <div  style="display: flex;align-items: center">
            <div style="width: 5px;height: 18px;border-radius: 20px;background: #FF5C61;margin-right: 7px"></div>
            <div style="font-size: 19px;font-weight: bold;color: #FF5C61;">{{menuTitle}}</div>
          </div>
          <div class="text-item" @click="skip(item.id)" v-for="item in noticeList" :key="item.id">
            <div class="title">{{ item.title }}</div>
            <div class="time">{{ item.create_time }}</div>
          </div>
        </div>
        <el-empty v-if="noticeList.length<=0" style="display: flex;justify-content: center;align-items: center;"></el-empty>
        <div class="string" v-if="noticeList.length>0 && count>limit"></div>
        <div  v-if="noticeList.length>0 && count>limit"  class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
          <div style="width: 110px;height: 1px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Nav from '@/components/Nav.vue'
import Bottom from '@/components/Bottom.vue'
import BackHome from '@/components/BackHome.vue'
import {getCategoryApi, getMenuListApi, getNoticeListApi} from "@/api/spotlight";
import {createParams} from "@/utils/utils";
export default {
  name: "spotlight",
  data(){
    return{
      tabActive: 3,
      menuActive:1,
      menuList:[],
      limit: 10,
      page: 1,
      count: 0,
      tabList:[],
      tabLoading:false,
      positionLoading:false,
      noticeList:[],
      menuTitle:''
    }
  },
  methods:{
    changeActive(e){
      this.menuActive=e.id
      this.menuTitle=e.name
      this.getList()
    },
    getCategory() {
      this.tabLoading = true
      getCategoryApi({name:'新闻分类',is_main:1}).then((res) => {
        this.tabList = res.result;
      }).finally(()=>{
        this.tabLoading = false
      })
    },
    skip(id){
      this.$router.replace({ name: 'spotlightDetail',query:{id:id} })
    },
    getMenuList() {
      getMenuListApi({id:this.id,}).then((res) => {
        this.menuList = res.result;
        this.menuActive=res.result[0].id
        this.menuTitle=res.result[0].name
        this.getList()
      }).catch((res) => {
        console.log(res)
      })
    },
    getList() {
      this.positionLoading = true
      getNoticeListApi({page:this.page,limit:this.limit,category_id:this.menuActive}).then((res) => {
        this.noticeList = res.result.list;
        this.count = res.result.count
      }).finally(() => {
        this.positionLoading = false
      })
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage1',this.page)
      this.getList()
    },
  },
  components:{
    Top,
    Nav,
    Bottom,
    BackHome
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.tabActive=this.id
    this.getCategory()
    this.getMenuList()
  }
}
</script>

<style scoped lang="scss">
.content-list{
  width: 900px;
  padding: 25px;
  border: 1px solid #E8E8E8;
  ::v-deep{
    .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #CD1738;
    }
  }
  .top{
    display: flex;
    box-sizing: border-box;
    img{
      //width: 360px;
      height: 220px;
    }
    .text{
      padding: 0 30px;
      .title{
        font-weight: 900;
      }
      .small-title{
        color: #8f8a8a;
        margin-top: 25px;
      }
    }
  }
  .bottom{
    width: 100%;
    .text-item{
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      cursor: pointer;
      .title{
        width: 700px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .text-item:hover{
      color: #CD1738;
    }
  }
  .string{
    width: 100%;
    height: 1px;
    background-color: #E8E8E8;
    margin: 20px 0;
  }
}
.content-nav{
  width: 100%;
  height: 50px;
  background: linear-gradient(to right, #FF5C61 30%, #FF5C61 60%, #FF5B5C 90%);
  a{
    text-decoration: none;
    color: #FFF;
  }
  .router-link-active {
    text-decoration: none;
    color: #FBBDBF;

  }

  .center-content{
    width: 1220px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    .nav{
      width: calc((100% - 20px));
      height: 100%;
      display:flex;
      .tab-item{
        width: 98px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #FFF;
        cursor: pointer;
        z-index:999
      }
      .tab-item.active{
        color: #FBBDBF;
        z-index:999
      }
      a{
        text-decoration: none;
        color: #FFF;
      }
      .router-link-active {
        text-decoration: none;
        color: #FBBDBF;
      }
    }
    .search{
      position: relative;
      input{
        box-sizing: border-box;
        height: 40px;
        background-color: hsla(222, 108, 210, 0.3);
        margin-top: 5px;
        font-size: 15px;
        //margin-right: 30px;
        padding-right: 35px;
      }
      img{
        position: absolute;
        width: 30px;
        height: 30px;
        right: 3px;
        top: 10px;
      }
    }
  }
}
.spotlight{
  position: relative;
  min-height: 100vh;
  a{
    text-decoration: none;
    color: #000000;
  }
  /*设置点击后的样式 */
  .router-link-active {
    text-decoration: none;
  }
  .info-list{
    width: 1100px;
    margin: 50px auto 0;
    display: flex;
    .back-home{
      position: fixed;
      right: 0;
    }
    .tab{
      margin: 20px 50px 0 0;
      cursor: pointer;
      .tab-item{
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #CD1738;
        background-color: #FFFFFF;
        margin: 20px 0;
        padding: 4px 10px;
      }
      .tab-item.active{
        color: #F7F7F7;
        background-color: #CD1738;
      }
    }
  }

}
</style>
